<template>
  <div class="ju-upload">
    <div v-if="value">
      <template v-if="multiple">
        <div v-for="(item,index) in value"
             :key="item"
             class="file-item d-flex align-items-center p-1 border border-opacity-50 rounded mb-1">
          <ju-icon class="me-1 flex-shrink-0 text-primary fs-5"
                   :icon="getFileIcon(value.name)"
                   style="width:24px;"
                   svg-icon />
          <div class="flex-grow-1 lh-sm me-1">
            {{ item.name }}<small class="text-primary">（{{ item.size|autoFormatFileSize }}）</small>
          </div>
          <ju-icon class="fs-4 flex-shrink-0"
                   icon="x"
                   style="width:24px;"
                   svg-icon
                   @click.native="doRemoveFile(index)"></ju-icon>
        </div>
      </template>
      <div v-else
           class="file-item d-flex align-items-center p-1 border border-opacity-50 rounded mb-1">
        <ju-icon class="me-1 flex-shrink-0 text-primary fs-5"
                 :icon="getFileIcon(value.name)"
                 style="width:24px;"
                 svg-icon />
        <div class="flex-grow-1 lh-sm me-1">
          {{ value.name }}<small class="text-primary">（{{ value.size|autoFormatFileSize }}）</small>
        </div>
        <ju-icon class="fs-4 flex-shrink-0 ju-icon-x"
                 icon="x"
                 style="width:24px;"
                 svg-icon
                 @click.native="doRemoveFile"></ju-icon>
      </div>
    </div>
    <div class="border-box ju-upload-dragger"
         :class="`dragger-${draggerStatus}`"
         @click.stop="doSelectFile"
         @dragenter.stop.prevent="drag ? draggerStatus = 'enter' : null"
         @dragleave.prevent="drag ? draggerStatus = 'leave' : null"
         @dragover.stop.prevent="drag ? draggerStatus = 'over' : null"
         @drop.stop.prevent="onDrop">
      <div class="h-100 d-flex flex-column align-items-center justify-content-center">
        <slot></slot>
      </div>
    </div>
    <input ref="iptFile"
           :accept="accept"
           hidden
           :multiple="multiple"
           type="file"
           @change="onFileChange" />
    <slot name="tip"></slot>
  </div>
</template>

<script lang="ts">
  import { Component, Model, Prop, Vue } from "@some21/vue-class-decorator";

  @Component({
    name: "ju-upload",
  })
  export default class extends Vue {
    $refs: {
      iptFile: HTMLInputElement;
    };
    @Prop({ type: String, default: "" })
    accept: string;
    @Prop({ type: Boolean, default: false })
    drag: boolean;
    @Prop({ type: Boolean, default: false })
    multiple: boolean;

    @Model("change", { type: [File, Array], default: null })
    value: File[] | File;

    draggerStatus = "leave";
    onFileChange() {
      if (this.multiple) {
        this.$emit("change", this.$refs.iptFile.files);
      } else {
        this.$emit("change", this.$refs.iptFile.files[0]);
      }
      this.$refs.iptFile.value = null; // 清空后以便下一次选择
    }
    doSelectFile() {
      this.$refs.iptFile.click();
    }

    doRemoveFile(index) {
      if (this.multiple) {
        (this.value as File[]).splice(index, 1);
        this.$emit("change", this.value);
      } else {
        this.$emit("change", null);
      }
    }
    onDrop(evt) {
      if (this.drag) {
        this.draggerStatus = "leave";
        evt.stopPropagation();
        evt.preventDefault();
        const files = evt.dataTransfer.files;

        if (this.multiple) {
          this.$emit("change", files);
        } else {
          this.$emit("change", files[0]);

          if (files.length > 1) {
            this.$message({ message: "一次性拖动多个文件将只保留第一个有效文件。", type: "warning" });
          }
        }
      }
    }

    getFileIcon(fileName: string) {
      if (fileName) {
        const lastIndex = fileName.lastIndexOf(".");
        if (lastIndex >= 0) {
          return `filetype-${fileName.substring(lastIndex + 1)}`;
        }
      }
      return "file-earmark-fill";
    }
  }
</script>

<style lang="scss" scoped>
  .ju-upload-dragger {
    width: 100%;
    height: 180px;
    border: 1px dashed var(--theme-gray-400);
    border-radius: var(--theme-radius);
    cursor: pointer;
    background-color: #fff;

    &.dragger-enter {
      background-color: #fff;
    }
    &.dragger-leave {
      background-color: #fff;
    }
    &.dragger-over {
      background-color: #eee;
    }

    &:hover {
      border-color: var(--theme-primary);
    }
  }
  // .file-item{
  //   &:hover{
  //     box-shadow: ;
  //   }

  // }

  .ju-icon-x {
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    &:hover {
      transform: rotate(180deg);
      color: var(--theme-danger);
    }
  }
</style>
